<template>
  <div>
    <div class="layui-container">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
          <div class="fly-panel">
            <div class="fly-panel-title fly-filter">
              <span
                  v-for="(list, index) in orderList"
                  @click="selectOrder(index, list.order)"
                  :key="list.id">
                <a :class="[index == selected ? navClass : '']">{{list.name}}</a>
                <span v-show="index < orderList.length - 1" class="fly-mid"></span>
              </span>
              <!--
              <span class="fly-filter-right layui-hide-xs">
            <a href="" class="layui-this">按最新</a>
            <span class="fly-mid"></span>
              <a href="">按热议</a>
            </span>
            -->
            </div>
            <ul class="fly-list">
              <li v-for="list of topList" :key="list.id">
                <a href="user/home.html" class="fly-avatar">
                  <img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
                </a>
                <h2>
                  <a class="layui-badge">{{list.category.name}}</a>
                  <router-link :to="'/detail/' + list.id">{{list.title}}</router-link>
                </h2>
                <div class="fly-list-info">
                  <a link>
                    <cite>{{list.user.name}}</cite>
                    <i class="iconfont icon-renzheng" title="认证信息：XXX"></i>
                    <i class="layui-badge fly-badge-vip">VIP3</i>
                  </a>
                  <span>{{list.created_at}}</span>

                  <span class="fly-list-kiss layui-hide-xs" title="浏览"><i class="iconfont">&#xe60b;</i> {{list.view_count}}</span>
                  <span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>
                  <span class="fly-list-nums">
                <i class="iconfont icon-pinglun1" title="评论"></i> {{list.reply_count}}
              </span>
                </div>
                <div class="fly-list-badge">
                  <span class="layui-badge layui-bg-black">置顶</span>
                  <span class="layui-badge layui-bg-red">精帖</span>

                </div>
              </li>

            </ul>
            <div style="text-align: center">
              <div class="laypage-main" v-if="this.isAjax">
                <a @click="ajaxNext" class="laypage-next">加载更多...</a>
              </div>
              <div class="laypage-main" v-else>
                <a class="laypage-next">已经到底了</a>
              </div>
            </div>
          </div>
        </div>

        <div class="layui-col-md4">
          <right-tip
              :article="article"
          >
          </right-tip>




<!--          <div class="fly-panel fly-signin">
            <div class="fly-panel-title">
              签到
              <i class="fly-mid"></i>
              <a href="javascript:;" class="fly-link" id="LAY_signinHelp">说明</a>
              <i class="fly-mid"></i>
              <a href="javascript:;" class="fly-link" id="LAY_signinTop">活跃榜<span class="layui-badge-dot"></span></a>
              <span class="fly-signin-days">已连续签到<cite>16</cite>天</span>
            </div>
            <div class="fly-panel-main fly-signin-main">
              <button class="layui-btn layui-btn-danger" id="LAY_signin">今日签到</button>
              <span>可获得<cite>5</cite>飞吻</span>

              &lt;!&ndash; 已签到状态 &ndash;&gt;
              &lt;!&ndash;
              <button class="layui-btn layui-btn-disabled">今日已签到</button>
              <span>获得了<cite>20</cite>飞吻</span>
              &ndash;&gt;
            </div>
          </div>-->



          <!-- 本周热议 start -->
            <right-hot
              :hot="hot"
            >
            </right-hot>
          <!-- 本周热议 end -->

          <!-- 这里可作为广告区域-->
          <advertising></advertising>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RightHot from "@/pages/common/RightHot"
import RightTip from "@/pages/common/RightTip"
import Advertising from "@/pages/common/Advertising";

export default {
  name: 'HomeContent',
  components: {
    RightHot,
    RightTip,
    Advertising
  },
  props: {
    topList: Array,
    isAjax: Boolean,
    article: Object,
    hot: Array
  },
  data () {
    return {
      selected: 0,
      navClass: 'layui-this',
      orderList: [
        {
          id: 1,
          name: '按最新',
          order: 'new'
        },
        {
          id: 2,
          name: '按最热',
          order: 'hot'
        },
        {
          id: 3,
          name: '按评论',
          order: 'reply'
        }
      ]
    }
  },
  methods: {
    ajaxNext () {
      // console.log(this.isAjax)
      // this.$emit('ajaxNext', this.topList[0]['category_id'], this.$store.state.indexOrder)
      this.$emit('ajaxNext', this.$store.state.navSelected, this.$store.state.indexOrder)
    },
    selectOrder (index, order) {
      this.selected = index
      this.$store.commit('saveIndexOrder', order)
      this.$emit('selectOrder', this.topList[0]['category_id'], this.$store.state.indexOrder)
    }
  }
}
</script>

<style scoped>

</style>